
<!--
* Author: WebAppLayers
* Product Name: INSPINIA
* Version: 4.0.1
-->
<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="utf-8">
    <title>Product Details | 威四方-INSPINIA-模板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Inspinia是WrapBootstrap平台上销量第一的管理后台模板。它非常适合构建CRM系统、内容管理系统、项目管理工具和定制化网络应用，具有简洁的界面设计、响应式布局和强大的功能特性。">
    <meta name="keywords" content="Inspinia 管理面板、WrapBootstrap、HTML模板、Bootstrap后台、CRM模板、CMS模板、响应式管理端、Web应用界面、管理主题、最佳管理模板">
    <meta name="author" content="威四方,疾风行">

    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- Theme Config Js -->
    <script src="assets/js/config.js"></script>

    <!-- Vendor css -->
    <link href="assets/css/vendors.min.css" rel="stylesheet" type="text/css">

    <!-- App css -->
    <link href="assets/css/app.min.css" rel="stylesheet" type="text/css">
</head>

<body>
<!-- Begin page -->
<div class="wrapper">

    
    <!-- Sidenav Menu Start -->
    <div class="sidenav-menu">

        <!-- Brand Logo -->
        <a href="index.html" class="logo">
            <span class="logo logo-light">
                <span class="logo-lg"><img src="assets/images/logo.png" alt="logo"></span>
                <span class="logo-sm"><img src="assets/images/logo-sm.png" alt="small logo"></span>
            </span>

            <span class="logo logo-dark">
                <span class="logo-lg"><img src="assets/images/logo-black.png" alt="dark logo"></span>
                <span class="logo-sm"><img src="assets/images/logo-sm.png" alt="small logo"></span>
            </span>
        </a>

        <!-- Sidebar Hover Menu Toggle Button -->
        <button class="button-on-hover">
            <i class="ti ti-menu-4 fs-22 align-middle"></i>
        </button>

        <!-- Full Sidebar Menu Close Button -->
        <button class="button-close-offcanvas">
            <i class="ti ti-x align-middle"></i>
        </button>

        <div class="scrollbar" data-simplebar>

            <!-- User -->
            <div class="sidenav-user">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <a href="pages-profile.html" class="link-reset">
                            <img src="assets/images/users/user-2.jpg" alt="user-image" class="rounded-circle mb-2 avatar-md">
                            <span class="sidenav-user-name fw-bold">Damian D.</span>
                            <span class="fs-12 fw-semibold" data-lang="user-role">Art Director</span>
                        </a>
                    </div>
                    <div>
                        <a class="dropdown-toggle drop-arrow-none link-reset sidenav-user-set-icon" data-bs-toggle="dropdown" data-bs-offset="0,12" href="#!" aria-haspopup="false" aria-expanded="false">
                            <i class="ti ti-settings fs-24 align-middle ms-1"></i>
                        </a>

                        <div class="dropdown-menu">
                            <!-- Header -->
                            <div class="dropdown-header noti-title">
                                <h6 class="text-overflow m-0">Welcome back!</h6>
                            </div>

                            <!-- My Profile -->
                            <a href="pages-profile.html" class="dropdown-item">
                                <i class="ti ti-user-circle me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Profile</span>
                            </a>

                            <!-- Notifications -->
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="ti ti-bell-ringing me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Notifications</span>
                            </a>

                            <!-- Wallet -->
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="ti ti-credit-card me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Balance: <span class="fw-semibold">$985.25</span></span>
                            </a>

                            <!-- Settings -->
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="ti ti-settings-2 me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Account Settings</span>
                            </a>

                            <!-- Support -->
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="ti ti-headset me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Support Center</span>
                            </a>

                            <!-- Divider -->
                            <div class="dropdown-divider"></div>

                            <!-- Lock -->
                            <a href="auth-lock-screen.html" class="dropdown-item">
                                <i class="ti ti-lock me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Lock Screen</span>
                            </a>

                            <!-- Logout -->
                            <a href="javascript:void(0);" class="dropdown-item text-danger fw-semibold">
                                <i class="ti ti-logout-2 me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Log Out</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!--- Sidenav Menu -->
            <ul class="side-nav">
                <li class="side-nav-title" data-lang="menu-title">Menu</li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarDashboards" aria-expanded="false" aria-controls="sidebarDashboards" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-layout-dashboard"></i></span>
                        <span class="menu-text" data-lang="dashboards">Dashboards</span>
                        <span class="badge bg-success">5</span>
                    </a>
                    <div class="collapse" id="sidebarDashboards">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="index.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="dashboard-one">Dashboard v.1</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="dashboard-2.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="dashboard-two">Dashboard v.2</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="dashboard-3.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="dashboard-three">Dashboard v.3</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="#!" class="side-nav-link disabled">
                                    <span class="menu-text" data-lang="dashboard-four">Dashboard v.4</span>
                                    <span class="badge text-bg-light opacity-50" data-lang="dashboard-soon">soon</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="#!" class="side-nav-link disabled">
                                    <span class="menu-text" data-lang="dashboard-five">Dashboard v.5</span>
                                    <span class="badge text-bg-light opacity-50" data-lang="dashboard-soon">soon</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a href="landing.html" target="_blank" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-stack-front"></i></span>
                        <span class="menu-text" data-lang="landing-page">Landing Page</span>
                    </a>
                </li>

                <li class="side-nav-title" data-lang="apps-title">Apps</li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarEcommerce" aria-expanded="false" aria-controls="sidebarEcommerce" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-basket"></i></span>
                        <span class="menu-text" data-lang="ecommerce">Ecommerce</span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarEcommerce">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarProducts" aria-expanded="false" aria-controls="sidebarProducts" class="side-nav-link">
                                    <span class="menu-text" data-lang="eco-products">Products</span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarProducts">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="ecommerce-products.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-pro-list">Products</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="ecommerce-products-grid.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-pro-grid">Products Grid</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="ecommerce-product-details.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-pro-details">Product Details</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="ecommerce-add-product.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-pro-add">Add Product</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="side-nav-item">
                                <a href="ecommerce-categories.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="eco-categories">Categories</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarOrders" aria-expanded="false" aria-controls="sidebarOrders" class="side-nav-link">
                                    <span class="menu-text" data-lang="eco-orders">Orders</span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarOrders">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="ecommerce-orders.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-orders-list">Orders</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="ecommerce-order-details.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-order-details">Order Details</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="side-nav-item">
                                <a href="ecommerce-customers.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="eco-customers">Customers</span>
                                </a>
                            </li>

                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarSellers" aria-expanded="false" aria-controls="sidebarSellers" class="side-nav-link">
                                    <span class="menu-text" data-lang="eco-sellers"> Sellers </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarSellers">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="ecommerce-sellers.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-sellers-list">Sellers</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="ecommerce-seller-details.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-sellers-details">Sellers Details</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>

                            <li class="side-nav-item">
                                <a href="ecommerce-reviews.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="eco-reviews">Reviews</span>
                                </a>
                            </li>

                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarReports" aria-expanded="false" aria-controls="sidebarReports" class="side-nav-link">
                                    <span class="menu-text" data-lang="eco-reports"> Reports </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarReports">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="ecommerce-product-views.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-pro-views">Product Views</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="ecommerce-sales.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-pro-sales">Sales</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarEmail" aria-expanded="false" aria-controls="sidebarEmail" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-mail"></i></span>
                        <span class="menu-text" data-lang="email">Email</span>
                        <span class="badge text-bg-danger">New</span>
                    </a>
                    <div class="collapse" id="sidebarEmail">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="email.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="email-inbox">Inbox</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="email-details.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="email-details">Details</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="email-compose.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="email-compose">Compose</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarUsers" aria-expanded="false" aria-controls="sidebarUsers" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-users"></i></span>
                        <span class="menu-text" data-lang="users"> Users </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarUsers">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="contacts.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="contacts">Contacts</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="roles.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="roles">Roles</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="permissions.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="permissions">Permissions</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarProjects" aria-expanded="false" aria-controls="sidebarProjects" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-briefcase"></i></span>
                        <span class="menu-text" data-lang="projects"> Projects </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarProjects">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="projects.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="projects">My Projects</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="projects-list.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="projects-list">Projects List</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="project-details.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="project-details">View Project</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="project-kanban.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="project-kanban">Kanban Board</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="project-team-board.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="project-team-board">Team Board</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="project-activity.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="project-activity">Activity Steam</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a href="file-manager.html" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-folder"></i></span>
                        <span class="menu-text" data-lang="file-manager"> File Manager </span>
                    </a>
                </li>

                <li class="side-nav-item">
                    <a href="chat.html" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-message-dots"></i></span>
                        <span class="menu-text" data-lang="chat"> Chat </span>
                    </a>
                </li>

                <li class="side-nav-item">
                    <a href="calendar.html" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-calendar"></i></span>
                        <span class="menu-text" data-lang="calendar"> Calendar </span>
                    </a>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarInvoice" aria-expanded="false" aria-controls="sidebarInvoice" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-invoice"></i></span>
                        <span class="menu-text" data-lang="invoice"> Invoice</span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarInvoice">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="invoices.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="invoices">Invoices</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="invoice-details.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="invoice-details">Single Invoice</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="invoice-create.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="invoice-create">New Invoice</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarOtherApps" aria-expanded="false" aria-controls="sidebarOtherApps" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-apps"></i></span>
                        <span class="menu-text" data-lang="otherapps"> Other Apps </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarOtherApps">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="companies.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="companies">Companies</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="clients.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="clients">Clients</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="outlook.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="outlook">Outlook View</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="vote-list.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="vote-list">Vote List</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="issue-tracker.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="issue-tracker">Issue Tracker</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="api-keys.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="api-keys">API Keys</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="blog.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="blog">Blog</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="article.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="article">Article</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="pin-board.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="pin-board">Pin Board</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="forum-view.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="forum-view">Forum View</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="forum-post.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="forum-post">Forum Post</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-title mt-2" data-lang="pages-title">Custom Pages</li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarPages" aria-expanded="false" aria-controls="sidebarPages" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-files"></i></span>
                        <span class="menu-text" data-lang="pages"> Pages </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarPages">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="pages-profile.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="pages-profile">Profile</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="pages-faq.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="pages-faq">FAQ</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="pages-pricing.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="pages-pricing">Pricing</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="pages-empty.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="pages-empty">Empty Page</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="pages-timeline.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="pages-timeline">Timeline</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="pages-search-results.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="pages-search-results">Search Results</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="pages-coming-soon.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="pages-coming-soon">Coming Soon</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="pages-terms-conditions.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="pages-terms-conditions">Terms & Conditions</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarMiscellaneous" aria-expanded="false" aria-controls="sidebarMiscellaneous" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-package"></i></span>
                        <span class="menu-text" data-lang="miscellaneous"> Miscellaneous </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarMiscellaneous">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="misc-nestable.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-nestable">Nestable List</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-text-diff.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-text-diff">Text Diff</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-pdf-viewer.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-pdf-viewer">PDF Viewer</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-i18.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-i18">i18 Support</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-sweet-alerts.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-sweet-alerts">Sweet Alerts</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-idle-timer.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-idle-timer">Idle Timer</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-pass-meter.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-pass-meter">Password Meter</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-live-favicon.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-live-favicon">Live Favicon</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-clipboard.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-clipboard">Clipboard</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-tree-view.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-tree-view">Tree View</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-loading-buttons.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-loading-buttons">Loading Buttons</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-gallery.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-gallery">Gallery</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-masonry.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-masonry">Masonry</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-tour.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-tour">Tour</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-animation.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-animation">Animation</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarPagesAuth" aria-expanded="false" aria-controls="sidebarPagesAuth" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-lock"></i></span>
                        <span class="menu-text" data-lang="authentication"> Authentication </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarPagesAuth">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarOneAuth" aria-expanded="false" aria-controls="sidebarOneAuth" class="side-nav-link">
                                    <span class="menu-text" data-lang="version-1"> Version 1 </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarOneAuth">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="auth-sign-in.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-sign-in">Sign In</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-sign-up.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-sign-up">Sign Up</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-reset-pass.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-reset-pass">Reset Password</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-new-pass.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-new-pass">New Password</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-two-factor.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-two-factor">Two Factor</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-lock-screen.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-lock-screen">Lock Screen</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-success-mail.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-success-mail">Success Mail</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-login-pin.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-login-pin">Login with PIN</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-delete-account.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-delete-account">Delete Account</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarTwoAuth" aria-expanded="false" aria-controls="sidebarTwoAuth" class="side-nav-link">
                                    <span class="menu-text" data-lang="version-2"> Version 2 </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarTwoAuth">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="auth-2-sign-in.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-2-sign-in">Sign In</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-2-sign-up.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-2-sign-up">Sign Up</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-2-reset-pass.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-2-reset-pass">Reset Password</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-2-new-pass.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-2-new-pass">New Password</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-2-two-factor.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-2-two-factor">Two Factor</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-2-lock-screen.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-2-lock-screen">Lock Screen</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-2-success-mail.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-2-success-mail">Success Mail</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-2-login-pin.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-2-login-pin">Login with PIN</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-2-delete-account.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-2-delete-account">Delete Account</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarThreeAuth" aria-expanded="false" aria-controls="sidebarThreeAuth" class="side-nav-link">
                                    <span class="menu-text" data-lang="version-3"> Version 3 </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarThreeAuth">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="auth-3-sign-in.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-3-sign-in">Sign In</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-3-sign-up.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-3-sign-up">Sign Up</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-3-reset-pass.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-3-reset-pass">Reset Password</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-3-new-pass.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-3-new-pass">New Password</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-3-two-factor.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-3-two-factor">Two Factor</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-3-lock-screen.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-3-lock-screen">Lock Screen</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-3-success-mail.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-3-success-mail">Success Mail</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-3-login-pin.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-3-login-pin">Login with PIN</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-3-delete-account.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-3-delete-account">Delete Account</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarPagesError" aria-expanded="false" aria-controls="sidebarPagesError" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-alert-hexagon"></i></span>
                        <span class="menu-text" data-lang="error-pages"> Error Pages </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarPagesError">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="error-400.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="error-400">400</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="error-401.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="error-401">401</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="error-403.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="error-403">403</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="error-404.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="error-404">404</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="error-408.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="error-408">408</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="error-500.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="error-500">500</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="maintenance.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="maintenance">Maintenance</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-title mt-2" data-lang="layouts-title">Layouts</li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarLayouts" aria-expanded="false" aria-controls="sidebarLayouts" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-layout"></i></span>
                        <span class="menu-text" data-lang="layout-options"> Layout Options </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarLayouts">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="layouts-scrollable.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="layouts-scrollable">Scrollable</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="layouts-compact.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="layouts-compact">Compact</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="layouts-boxed.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="layouts-boxed">Boxed</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="layouts-horizontal.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="layouts-horizontal">Horizontal</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="layouts-preloader.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="layouts-preloader">Preloader</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarSidebars" aria-expanded="false" aria-controls="sidebarSidebars" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-layout-sidebar"></i></span>
                        <span class="menu-text" data-lang="sidebars"> Sidebars </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarSidebars">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="sidebar-light.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-light">Light Menu</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-gradient.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-gradient">Gradient Menu</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-gray.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-gray">Gray Menu</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-image.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-image">Image Menu</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-compact.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-compact">Compact Menu</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-icon-view.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-icon-view">Icon View Menu</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-on-hover.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-on-hover">On Hover Menu</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-on-hover-active.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-on-hover-active">On Hover Active</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-offcanvas.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-offcanvas">Offcanvas Menu</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-no-icons.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-no-icons">No Icons with Lines</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-with-lines.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-with-lines">Sidebar with Lines</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarTopbars" aria-expanded="false" aria-controls="sidebarTopbars" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-layout-bottombar"></i></span>
                        <span class="menu-text" data-lang="topbar"> Topbar </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarTopbars">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="topbar-dark.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="topbar-dark">Dark Topbar</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="topbar-gray.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="topbar-gray">Gray Topbar</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="topbar-gradient.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="topbar-gradient">Gradient Topbar</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="topbar-sub-items.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="topbar-sub-items">Topbar with Sub Items</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="topbar-tools.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="topbar-tools">Topbar with Tools</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-title mt-2" data-lang="components-title">Components</li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarBaseUI" aria-expanded="false" aria-controls="sidebarBaseUI" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-palette"></i></span>
                        <span class="menu-text" data-lang="base-ui"> Base UI </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarBaseUI">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="ui-accordions.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-accordions">Accordions</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-alerts.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-alerts">Alerts</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-images.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-images">Images</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-badges.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-badges">Badges</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-breadcrumb.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-breadcrumb">Breadcrumb</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-buttons.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-buttons">Buttons</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-cards.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-cards">Cards</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-carousel.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-carousel">Carousel</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-collapse.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-collapse">Collapse</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-colors.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-colors">Colors</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-dropdowns.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-dropdowns">Dropdowns</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-videos.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-videos">Videos</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-grid.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-grid">Grid Options</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-links.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-links">Links</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-list-group.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-list-group">List Group</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-modals.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-modals">Modals</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-notifications.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-notifications">Notifications</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-offcanvas.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-offcanvas">Offcanvas</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-placeholders.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-placeholders">Placeholders</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-pagination.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-pagination">Pagination</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-popovers.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-popovers">Popovers</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-progress.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-progress">Progress</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-scrollspy.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-scrollspy">Scrollspy</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-spinners.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-spinners">Spinners</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-tabs.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-tabs">Tabs</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-tooltips.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-tooltips">Tooltips</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-typography.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-typography">Typography</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-utilities.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-utilities">Utilities</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a href="widgets.html" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-category"></i></span>
                        <span class="menu-text" data-lang="widgets"> Widgets </span>
                    </a>
                </li>

                <li class="side-nav-item">
                    <a href="metrics.html" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-chart-histogram"></i></span>
                        <span class="menu-text" data-lang="metrics"> Metrics </span>
                    </a>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarCharts" aria-expanded="false" aria-controls="sidebarCharts" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-chart-donut"></i></span>
                        <span class="menu-text" data-lang="graphs"> Graphs </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarCharts">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarApexCharts" aria-expanded="false" aria-controls="sidebarApexCharts" class="side-nav-link">
                                    <span class="menu-text" data-lang="apex-charts"> Apex Charts </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarApexCharts">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="charts-apex-area.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-area">Area</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-bar.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-bar">Bar</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-bubble.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-bubble">Bubble</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-candlestick.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-candlestick">Candlestick</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-column.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-column">Column</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-heatmap.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-heatmap">Heatmap</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-line.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-line">Line</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-mixed.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-mixed">Mixed</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-timeline.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-timeline">Timeline</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-boxplot.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-boxplot">Boxplot</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-treemap.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-treemap">Treemap</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-pie.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-pie">Pie</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-radar.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-radar">Radar</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-radialbar.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-radialbar">RadialBar</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-scatter.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-scatter">Scatter</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-polar-area.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-polar-area">Polar Area</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-sparklines.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-sparklines">Sparklines</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-range.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-range">Range</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-funnel.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-funnel">Funnel</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-slope.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-slope">Slope</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarEcharts" aria-expanded="false" aria-controls="sidebarEcharts" class="side-nav-link">
                                    <span class="menu-text" data-lang="echarts"> Echarts </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarEcharts">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="charts-echart-line.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-line">Line</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-bar.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-bar">Bar</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-pie.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-pie">Pie</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-scatter.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-scatter">Scatter</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-geo-map.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-geo-map">GEO Map</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-gauge.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-gauge">Gauge</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-candlestick.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-candlestick">Candlestick</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-area.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-area">Area</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-radar.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-radar">Radar</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-heatmap.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-heatmap">Heatmap</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-other.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-other">Other</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="side-nav-item">
                                <a href="charts-apextree.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="charts-apextree">Apex Tree</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="charts-apexsankey.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="charts-apexsankey">Apex Sankey</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarForms" aria-expanded="false" aria-controls="sidebarForms" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-checkup-list"></i></span>
                        <span class="menu-text" data-lang="forms">Forms</span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarForms">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="form-elements.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-elements">Basic Elements</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="form-pickers.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-pickers">Pickers</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="form-select.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-select">Select</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="form-validation.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-validation">Validation</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="form-wizard.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-wizard">Wizard</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="form-fileuploads.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-fileuploads">File Uploads</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="form-text-editors.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-text-editors">Text Editors</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="form-range-slider.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-range-slider">Range Slider</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="form-layouts.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-layouts">Layouts</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="form-other-plugins.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-other-plugins">Other Plugins</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarTables" aria-expanded="false" aria-controls="sidebarTables" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-table-column"></i></span>
                        <span class="menu-text" data-lang="tables">Tables</span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarTables">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="tables-static.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="tables-static">Static Tables</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="tables-custom.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="tables-custom">Custom Tables</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarDataTables" aria-expanded="false" aria-controls="sidebarDataTables" class="side-nav-link">
                                    <span class="menu-text" data-lang="datatables">DataTables</span>
                                    <span class="badge bg-success">12</span>
                                </a>
                                <div class="collapse" id="sidebarDataTables">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-basic.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-basic">Basic</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-export-data.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-export-data">Export Data</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-select.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-select">Select</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-ajax.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-ajax">Ajax</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-javascript.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-javascript">Javascript Source</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-rendering.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-rendering">Data Rendering</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-scroll.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-scroll">Scroll</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-columns.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-columns">Show & Hide Column</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-child-rows.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-child-rows">Child Rows</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-column-searching.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-column-searching">Column Searching</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-range-search.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-range-search">Range Search</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-fixed-header.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-fixed-header">Fixed Header</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-add-rows.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-add-rows">Add Rows</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-checkbox-select.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-checkbox-select">Checkbox Select</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarIcons" aria-expanded="false" aria-controls="sidebarIcons" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-icons"></i></span>
                        <span class="menu-text" data-lang="icons">Icons</span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarIcons">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="icons-tabler.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="icons-tabler">Tabler</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="icons-lucide.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="icons-lucide">Lucide</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="icons-flags.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="icons-flags">Flags</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarMaps" aria-expanded="false" aria-controls="sidebarMaps" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-map"></i></span>
                        <span class="menu-text" data-lang="maps">Maps</span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarMaps">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="maps-google.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="maps-google">Google Maps</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="maps-vector.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="maps-vector">Vector Maps</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="maps-leaflet.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="maps-leaflet">Leaflet Maps</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-title mt-2" data-lang="items-title">Menu Items</li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarMenuLevels" aria-expanded="false" aria-controls="sidebarMenuLevels" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-sitemap"></i></span>
                        <span class="menu-text" data-lang="menu-levels"> Menu Levels </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarMenuLevels">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarSecondLevel" aria-expanded="false" aria-controls="sidebarSecondLevel" class="side-nav-link">
                                    <span class="menu-text" data-lang="second-level"> Second Level </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarSecondLevel">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="javascript: void(0);" class="side-nav-link">
                                                <span class="menu-text">Item 2.1</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="javascript: void(0);" class="side-nav-link">
                                                <span class="menu-text">Item 2.2</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarThirdLevel" aria-expanded="false" aria-controls="sidebarThirdLevel" class="side-nav-link">
                                    <span class="menu-text" data-lang="third-level"> Third Level </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarThirdLevel">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="javascript: void(0);" class="side-nav-link">Item 1</a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a data-bs-toggle="collapse" href="#sidebarFourthLevel" aria-expanded="false" aria-controls="sidebarFourthLevel" class="side-nav-link">
                                                <span class="menu-text"> Item 2 </span>
                                                <span class="menu-arrow"></span>
                                            </a>
                                            <div class="collapse" id="sidebarFourthLevel">
                                                <ul class="sub-menu">
                                                    <li class="side-nav-item">
                                                        <a href="javascript: void(0);" class="side-nav-link">
                                                            <span class="menu-text">Item 3.1</span>
                                                        </a>
                                                    </li>
                                                    <li class="side-nav-item">
                                                        <a href="javascript: void(0);" class="side-nav-link">
                                                            <span class="menu-text">Item 3.2</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a href="#!" class="side-nav-link disabled">
                        <span class="menu-icon"><i class="ti ti-ban"></i></span>
                        <span class="menu-text" data-lang="disabled-menu"> Disabled Menu </span>
                    </a>
                </li>

                <li class="side-nav-item">
                    <a href="#!" class="side-nav-link special-menu">
                        <span class="menu-icon"><i class="ti ti-star"></i></span>
                        <span class="menu-text" data-lang="special-menu"> Special Menu </span>
                    </a>
                </li>

            </ul>
        </div>
    </div>
    <!-- Sidenav Menu End -->

    <!-- Topbar Start -->
    <header class="app-topbar">
        <div class="container-fluid topbar-menu">
            <div class="d-flex align-items-center gap-2">
                <!-- Topbar Brand Logo -->
                <div class="logo-topbar">
                    <!-- Logo light -->
                    <a href="index.html" class="logo-light">
                        <span class="logo-lg">
                            <img src="assets/images/logo.png" alt="logo">
                        </span>
                        <span class="logo-sm">
                            <img src="assets/images/logo-sm.png" alt="small logo">
                        </span>
                    </a>

                    <!-- Logo Dark -->
                    <a href="index.html" class="logo-dark">
                        <span class="logo-lg">
                            <img src="assets/images/logo-black.png" alt="dark logo">
                        </span>
                        <span class="logo-sm">
                            <img src="assets/images/logo-sm.png" alt="small logo">
                        </span>
                    </a>
                </div>

                <!-- Sidebar Menu Toggle Button -->
                <button class="sidenav-toggle-button btn btn-primary btn-icon">
                    <i class="ti ti-menu-4 fs-22"></i>
                </button>

                <!-- Horizontal Menu Toggle Button -->
                <button class="topnav-toggle-button px-2" data-bs-toggle="collapse" data-bs-target="#topnav-menu-content">
                    <i class="ti ti-menu-4 fs-22"></i>
                </button>

                <!-- Search -->
                <div class="app-search d-none d-xl-flex">
                    <input type="search" class="form-control topbar-search" name="search" placeholder="Search for something...">
                    <i data-lucide="search" class="app-search-icon text-muted"></i>
                </div>

                <!-- Mega Menu Dropdown -->
                <div class="topbar-item d-none d-md-flex">
                    <div class="dropdown">
                        <button class="topbar-link btn fw-medium btn-link dropdown-toggle drop-arrow-none" data-bs-toggle="dropdown" data-bs-offset="0,16" type="button" aria-haspopup="false" aria-expanded="false">
                            Boom Boom! 😍<i class="ti ti-chevron-down ms-1"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-xxl p-0">
                            <div class="h-100" style="max-height: 380px;" data-simplebar>
                                <div class="row g-0">
                                    <div class="col-12">
                                        <div class="p-3 text-center bg-light bg-opacity-50">
                                            <h4 class="mb-0 fs-lg fw-semibold">Welcome to <span class="text-primary">INSPINIA+</span> Admin Theme.</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="row g-0">
                                    <div class="col-md-4">
                                        <div class="p-3">
                                            <h5 class="mb-2 fw-semibold fs-sm dropdown-header">Dashboard & Analytics</h5>
                                            <ul class="list-unstyled megamenu-list">
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Sales Dashboard</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Marketing Dashboard</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Finance Overview</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">User Analytics</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Traffic Insights</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Performance Metrics</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Conversion Tracking</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="p-3">
                                            <h5 class="mb-2 fw-semibold fs-sm dropdown-header">Project Management</h5>
                                            <ul class="list-unstyled megamenu-list">
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Task Overview</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Kanban Board</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Gantt Chart</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Team Collaboration</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Project Milestones</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Workflow Automation</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Timesheets & Reports</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="p-3">
                                            <h5 class="mb-2 fw-semibold fs-sm dropdown-header">User Management</h5>
                                            <ul class="list-unstyled megamenu-list">
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">User Profiles</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Access Control</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Role Permissions</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Activity Logs</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Security Settings</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">User Groups</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Authentication & Login</a>
                                                </li>
                                            </ul>
                                        </div> <!-- end dropdown-->
                                    </div> <!-- end col-->
                                </div> <!-- end row-->

                            </div> <!-- end .h-100-->
                        </div> <!-- .dropdown-menu-->
                    </div> <!-- .dropdown-->
                </div> <!-- end topbar-item -->
            </div> <!-- .d-flex-->

            <div class="d-flex align-items-center gap-2">
                <!-- Language Dropdown -->
                <div class="topbar-item">
                    <div class="dropdown">
                        <button class="topbar-link fw-bold" data-bs-toggle="dropdown" data-bs-offset="0,21" type="button" aria-haspopup="false" aria-expanded="false">
                            <img src="assets/images/flags/us.svg" alt="user-image" class="w-100 rounded me-2" height="18" id="selected-language-image">
                            <span id="selected-language-code"> EN </span>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="en" title="English">
                                <img src="assets/images/flags/us.svg" alt="English" class="me-1 rounded" height="18" data-translator-image>
                                <span class="align-middle">English</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="de" title="German">
                                <img src="assets/images/flags/de.svg" alt="German" class="me-1 rounded" height="18" data-translator-image>
                                <span class="align-middle">Deutsch</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="it" title="Italian">
                                <img src="assets/images/flags/it.svg" alt="Italian" class="me-1 rounded" height="18" data-translator-image>
                                <span class="align-middle">Italiano</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="es" title="Spanish">
                                <img src="assets/images/flags/es.svg" alt="Spanish" class="me-1 rounded" height="18" data-translator-image>
                                <span class="align-middle">Español</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="ru" title="Russian">
                                <img src="assets/images/flags/ru.svg" alt="Russian" class="me-1 rounded" height="18" data-translator-image>
                                <span class="align-middle">Русский</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="hi" title="Hindi">
                                <img src="assets/images/flags/in.svg" alt="Hindi" class="me-1 rounded" height="18" data-translator-image>
                                <span class="align-middle">हिन्दी</span>
                            </a>
                        </div> <!-- end dropdown-menu-->
                    </div> <!-- end dropdown-->
                </div> <!-- end topbar item-->

                <!-- Messages Dropdown -->
                <div class="topbar-item">
                    <div class="dropdown">
                        <button class="topbar-link dropdown-toggle drop-arrow-none" data-bs-toggle="dropdown" data-bs-offset="0,22" type="button" data-bs-auto-close="outside" aria-haspopup="false" aria-expanded="false">
                            <i data-lucide="mails" class="fs-xxl"></i>
                            <span class="badge text-bg-success badge-circle topbar-badge">7</span>
                        </button>

                        <div class="dropdown-menu p-0 dropdown-menu-end dropdown-menu-lg">
                            <div class="px-3 py-2 border-bottom">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h6 class="m-0 fs-md fw-semibold">Messages</h6>
                                    </div>
                                    <div class="col text-end">
                                        <a href="#!" class="badge badge-soft-success badge-label py-1">09 Notifications</a>
                                    </div>
                                </div>
                            </div>

                            <div style="max-height: 300px;" data-simplebar>
                                <!-- item 1 -->
                                <div class="dropdown-item notification-item py-2 text-wrap active" id="message-1">
                                    <span class="d-flex gap-3">
                                        <span class="flex-shrink-0">
                                            <img src="assets/images/users/user-1.jpg" class="avatar-md rounded-circle" alt="User Avatar">
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Liam Carter</span> uploaded a new document to <span class="fw-medium text-body">Project Phoenix</span>
                                            <br>
                                            <span class="fs-xs">5 minutes ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#message-1">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 2 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="message-2">
                                    <span class="d-flex gap-3">
                                        <span class="flex-shrink-0">
                                            <img src="assets/images/users/user-2.jpg" class="avatar-md rounded-circle" alt="User Avatar">
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Ava Mitchell</span> commented on <span class="fw-medium text-body">Marketing Campaign Q3</span>
                                            <br>
                                            <span class="fs-xs">12 minutes ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#message-2">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 3 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="message-3">
                                    <span class="d-flex gap-3">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title text-bg-info rounded-circle fs-22">
                                                <i data-lucide="shield-user" class="fs-22 fill-white"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Noah Blake</span> updated the status of <span class="fw-medium text-body">Client Onboarding</span>
                                            <br>
                                            <span class="fs-xs">30 minutes ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#message-3">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 4 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="message-4">
                                    <span class="d-flex gap-3">
                                        <span class="flex-shrink-0">
                                            <img src="assets/images/users/user-4.jpg" class="avatar-md rounded-circle" alt="User Avatar">
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Sophia Taylor</span> sent an invoice for <span class="fw-medium text-body">Service Renewal</span>
                                            <br>
                                            <span class="fs-xs">1 hour ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#message-4">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 5 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="message-5">
                                    <span class="d-flex gap-3">
                                        <span class="flex-shrink-0">
                                            <img src="assets/images/users/user-5.jpg" class="avatar-md rounded-circle" alt="User Avatar">
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Ethan Moore</span> completed the task <span class="fw-medium text-body">UI Review</span>
                                            <br>
                                            <span class="fs-xs">2 hours ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#message-5">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 6 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="message-6">
                                    <span class="d-flex gap-3">
                                        <span class="flex-shrink-0">
                                            <img src="assets/images/users/user-6.jpg" class="avatar-md rounded-circle" alt="User Avatar">
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Olivia White</span> assigned you a task in <span class="fw-medium text-body">Sales Pipeline</span>
                                            <br>
                                            <span class="fs-xs">Yesterday</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#message-6">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>

                            <!-- All-->
                            <a href="javascript:void(0);" class="dropdown-item text-center text-reset text-decoration-underline link-offset-2 fw-bold notify-item border-top border-light py-2">
                                Read All Messages
                            </a>

                        </div> <!-- End dropdown-menu -->
                    </div> <!-- end dropdown-->
                </div> <!-- end topbar item-->

                <!-- Notification Dropdown -->
                <div class="topbar-item">
                    <div class="dropdown">
                        <button class="topbar-link dropdown-toggle drop-arrow-none" data-bs-toggle="dropdown" data-bs-offset="0,22" type="button" data-bs-auto-close="outside" aria-haspopup="false" aria-expanded="false">
                            <i data-lucide="bell" class="fs-xxl"></i>
                            <span class="badge badge-square text-bg-warning topbar-badge">14</span>
                        </button>

                        <div class="dropdown-menu p-0 dropdown-menu-end dropdown-menu-lg">
                            <div class="px-3 py-2 border-bottom">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h6 class="m-0 fs-md fw-semibold">Notifications</h6>
                                    </div>
                                    <div class="col text-end">
                                        <a href="#!" class="badge text-bg-light badge-label py-1">14 Alerts</a>
                                    </div>
                                </div>
                            </div>

                            <div style="max-height: 300px;" data-simplebar>
                                <!-- item 1 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-1">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-danger-subtle text-danger rounded fs-22">
                                                <i data-lucide="server-crash" class="fs-xl fill-danger"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Critical alert: Server crash detected</span>
                                            <br>
                                            <span class="fs-xs">30 minutes ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-1">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 2 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-2">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-warning-subtle text-warning rounded fs-22">
                                                <i data-lucide="alert-triangle" class="fs-xl fill-warning"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">High memory usage on Node A</span>
                                            <br>
                                            <span class="fs-xs">10 minutes ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-2">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 3 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-3">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-success-subtle text-success rounded fs-22">
                                                <i data-lucide="check-circle" class="fs-xl fill-success"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Backup completed successfully</span>
                                            <br>
                                            <span class="fs-xs">1 hour ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-3">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 4 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-4">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-primary-subtle text-primary rounded fs-22">
                                                <i data-lucide="user-plus" class="fs-xl fill-primary"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">New user registration: Sarah Miles</span>
                                            <br>
                                            <span class="fs-xs">Just now</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-4">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 5 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-5">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-danger-subtle text-danger rounded fs-22">
                                                <i data-lucide="bug" class="fs-xl fill-danger"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Bug reported in payment module</span>
                                            <br>
                                            <span class="fs-xs">20 minutes ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-5">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 6 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-6">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-info-subtle text-info rounded fs-22">
                                                <i data-lucide="message-circle" class="fs-xl fill-info"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">New comment on Task #142</span>
                                            <br>
                                            <span class="fs-xs">15 minutes ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-6">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 7 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-7">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-warning-subtle text-warning rounded fs-22">
                                                <i data-lucide="battery-warning" class="fs-xl fill-warning"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Low battery on Device X</span>
                                            <br>
                                            <span class="fs-xs">45 minutes ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-7">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 8 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-8">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-success-subtle text-success rounded fs-22">
                                                <i data-lucide="cloud-upload" class="fs-xl fill-success"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">File upload completed</span>
                                            <br>
                                            <span class="fs-xs">1 hour ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-8">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 9 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-9">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-primary-subtle text-primary rounded fs-22">
                                                <i data-lucide="calendar" class="fs-xl fill-primary"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Team meeting scheduled at 3 PM</span>
                                            <br>
                                            <span class="fs-xs">2 hours ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-9">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 10 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-10">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-secondary-subtle text-secondary rounded fs-22">
                                                <i data-lucide="download" class="fs-xl fill-secondary"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Report ready for download</span>
                                            <br>
                                            <span class="fs-xs">3 hours ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-10">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 11 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-11">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-danger-subtle text-danger rounded fs-22">
                                                <i data-lucide="lock" class="fs-xl fill-danger"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Multiple failed login attempts</span>
                                            <br>
                                            <span class="fs-xs">5 hours ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-11">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 12 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-12">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-info-subtle text-info rounded fs-22">
                                                <i data-lucide="bell-ring" class="fs-xl fill-info"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Reminder: Submit your timesheet</span>
                                            <br>
                                            <span class="fs-xs">Today, 9:00 AM</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-12">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 13 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-13">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-warning-subtle text-warning rounded fs-22">
                                                <i data-lucide="database-zap" class="fs-xl fill-warning"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Database nearing capacity</span>
                                            <br>
                                            <span class="fs-xs">Yesterday</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-13">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 14 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-14">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-success-subtle text-success rounded fs-22">
                                                <i data-lucide="check-square" class="fs-xl fill-success"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">System check completed</span>
                                            <br>
                                            <span class="fs-xs">2 days ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-14">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>
                            </div> <!-- end dropdown-->

                            <!-- All-->
                            <a href="javascript:void(0);" class="dropdown-item text-center text-reset text-decoration-underline link-offset-2 fw-bold notify-item border-top border-light py-2">
                                View All Alerts
                            </a>

                        </div>
                    </div>
                </div>

                <!-- Button Trigger Customizer Offcanvas -->
                <div class="topbar-item d-none d-sm-flex">
                    <button class="topbar-link" data-bs-toggle="offcanvas" data-bs-target="#theme-settings-offcanvas" type="button">
                        <i data-lucide="settings" class="fs-xxl"></i>
                    </button>
                </div>

                <!-- Light/Dark Mode Button -->
                <div class="topbar-item d-none d-sm-flex">
                    <button class="topbar-link" id="light-dark-mode" type="button">
                        <i data-lucide="moon" class="fs-xxl mode-light-moon"></i>
                        <i data-lucide="sun" class="fs-xxl mode-light-sun"></i>
                    </button>
                </div>

                <!-- User Dropdown -->
                <div class="topbar-item nav-user">
                    <div class="dropdown">
                        <a class="topbar-link dropdown-toggle drop-arrow-none px-2" data-bs-toggle="dropdown" data-bs-offset="0,16" href="#!" aria-haspopup="false" aria-expanded="false">
                            <img src="assets/images/users/user-2.jpg" width="32" class="rounded-circle me-lg-2 d-flex" alt="user-image">
                            <div class="d-lg-flex align-items-center gap-1 d-none">
                                <h5 class="my-0">Damian D.</h5>
                                <i class="ti ti-chevron-down align-middle"></i>
                            </div>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <!-- Header -->
                            <div class="dropdown-header noti-title">
                                <h6 class="text-overflow m-0">Welcome back!</h6>
                            </div>

                            <!-- My Profile -->
                            <a href="pages-profile.html" class="dropdown-item">
                                <i class="ti ti-user-circle me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Profile</span>
                            </a>

                            <!-- Notifications -->
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="ti ti-bell-ringing me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Notifications</span>
                            </a>

                            <!-- Wallet -->
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="ti ti-credit-card me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Balance: <span class="fw-semibold">$985.25</span></span>
                            </a>

                            <!-- Settings -->
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="ti ti-settings-2 me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Account Settings</span>
                            </a>

                            <!-- Support -->
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="ti ti-headset me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Support Center</span>
                            </a>

                            <!-- Divider -->
                            <div class="dropdown-divider"></div>

                            <!-- Lock -->
                            <a href="auth-lock-screen.html" class="dropdown-item">
                                <i class="ti ti-lock me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Lock Screen</span>
                            </a>

                            <!-- Logout -->
                            <a href="javascript:void(0);" class="dropdown-item text-danger fw-semibold">
                                <i class="ti ti-logout-2 me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Log Out</span>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- Topbar End -->

    

    <!-- ============================================================== -->
    <!-- Start Main Content -->
    <!-- ============================================================== -->

    <div class="content-page">

        <div class="container-fluid">

            
            <div class="page-title-head d-flex align-items-center">
                <div class="flex-grow-1">
                    <h4 class="fs-sm text-uppercase fw-bold m-0">Product Details</h4>
                </div>

                <div class="text-end">
                    <ol class="breadcrumb m-0 py-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Inspinia</a></li>
                        
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Ecommerce</a></li>
                        
                        <li class="breadcrumb-item active">Product Details</li>
                    </ol>
                </div>
            </div>
            

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">

                            <div class="row">
                                <div class="col-xl-4">
                                    <div class="card card-top-sticky border-0">
                                        <div class="card-body p-0">
                                            <!-- Crossfade -->
                                            <div id="carouselExampleFade" class="carousel slide carousel-fade"
                                                 data-bs-ride="carousel">
                                                <div class="carousel-inner bg-light bg-opacity-25 border border-light border-dashed rounded-3"
                                                     role="listbox">
                                                    <div class="carousel-item text-center active">
                                                        <img src="assets/images/products/single-1.png" alt=""
                                                             class="img-fluid">
                                                    </div>
                                                    <div class="carousel-item text-center">
                                                        <img src="assets/images/products/single-2.png" alt=""
                                                             class="img-fluid">
                                                    </div>
                                                    <div class="carousel-item text-center">
                                                        <img src="assets/images/products/single-3.png" alt=""
                                                             class="img-fluid">
                                                    </div>
                                                    <div class="carousel-item text-center">
                                                        <img src="assets/images/products/single-4.png" alt=""
                                                             class="img-fluid">
                                                    </div>
                                                </div>
                                                <div class="carousel-indicators m-0 mt-3 d-lg-flex d-none position-static h-100 rounded gap-2">
                                                    <button type="button" data-bs-target="#carouselExampleFade"
                                                            data-bs-slide-to="0" aria-current="true"
                                                            aria-label="Slide 1"
                                                            class="h-auto rounded bg-light-subtle border active"
                                                            style="width: auto !important;">
                                                        <img src="assets/images/products/single-1.png"
                                                             class="d-block avatar-xl" alt="indicator-img">
                                                    </button>
                                                    <button type="button" data-bs-target="#carouselExampleFade"
                                                            data-bs-slide-to="1" aria-label="Slide 2"
                                                            class="h-auto rounded bg-light-subtle border"
                                                            style="width: auto !important;">
                                                        <img src="assets/images/products/single-2.png"
                                                             class="d-block avatar-xl" alt="indicator-img">
                                                    </button>
                                                    <button type="button" data-bs-target="#carouselExampleFade"
                                                            data-bs-slide-to="2" aria-label="Slide 3"
                                                            class="h-auto rounded bg-light-subtle border"
                                                            style="width: auto !important;">
                                                        <img src="assets/images/products/single-3.png"
                                                             class="d-block avatar-xl" alt="indicator-img">
                                                    </button>
                                                    <button type="button" data-bs-target="#carouselExampleFade"
                                                            data-bs-slide-to="3" aria-label="Slide 4"
                                                            class="h-auto rounded bg-light-subtle border"
                                                            style="width: auto !important;">
                                                        <img src="assets/images/products/single-4.png"
                                                             class="d-block avatar-xl" alt="indicator-img">
                                                    </button>
                                                </div>
                                            </div> <!-- end carousel-->

                                            <div class="text-center my-3">
                                                <a href="ecommerce-add-products.html" class="btn btn-light me-1"><i
                                                        class="ti ti-pencil fs-lg me-1"></i> Edit</a>
                                                <a href="ecommerce-add-products.html" class="btn btn-danger"><i
                                                        class="ti ti-circle-dashed-x fs-lg me-1"></i> Delisting</a>
                                            </div>
                                        </div> <!-- end card-body-->
                                    </div> <!-- end card-->
                                </div> <!-- end col-->

                                <div class="col-xl-8">
                                    <div class="p-4">
                                        <div class="d-flex align-items-center justify-content-between">
                                            <div>
                                                <span class="badge bg-success-subtle text-success px-2 py-1 fs-base rounded-pill">In Stock</span>
                                            </div>
                                            <div class="flex-grow-1 d-inline-flex align-items-center justify-content-end fs-lg">
                                                <span class="ti ti-star-filled text-warning"></span>
                                                <span class="ti ti-star-filled text-warning"></span>
                                                <span class="ti ti-star-filled text-warning"></span>
                                                <span class="ti ti-star-filled text-warning"></span>
                                                <span class="ti ti-star-filled text-warning"></span>
                                                <span class="ms-1 fs-base"><a href="ecommerce-reviews.html"
                                                                            class="link-reset fw-medium">(859 Reviews)</a> </span>
                                            </div>
                                        </div>
                                        <div class="mt-3 mb-5">
                                            <h4 class="fs-xl">Monterey Velvet Blue Luxury Relaxation Single
                                                Seater Sofa</h4>
                                        </div>

                                        <div class="row mb-4">
                                            <div class="col-md-4 col-xl-3">
                                                <h6 class="mb-1 text-muted text-uppercase">SKU:</h6>
                                                <p class="fw-medium mb-0">SOFA-10058</p>
                                            </div>
                                            <div class="col-md-4 col-xl-3">
                                                <h6 class="mb-1 text-muted text-uppercase">Category:</h6>
                                                <p class="fw-medium mb-0">Furniture</p>
                                            </div>
                                            <div class="col-md-4 col-xl-3">
                                                <h6 class="mb-1 text-muted text-uppercase">Stock:</h6>
                                                <p class="fw-medium mb-0">128</p>
                                            </div>
                                            <div class="col-md-4 col-xl-3">
                                                <h6 class="mb-1 text-muted text-uppercase">Published:</h6>
                                                <p class="fw-medium mb-0">28 Apr, 2025 <small class="text-muted">10:15
                                                    AM</small></p>
                                            </div>
                                        </div>

                                        <div class="row mb-4">
                                            <div class="col-md-4 col-xl-3">
                                                <h6 class="mb-1 text-muted text-uppercase">Orders:</h6>
                                                <p class="fw-medium mb-0">5028</p>
                                            </div>
                                            <div class="col-md-4 col-xl-3">
                                                <h6 class="mb-1 text-muted text-uppercase">Revenue:</h6>
                                                <p class="fw-medium mb-0">$20,886.25</p>
                                            </div>
                                        </div>

                                        <h3 class="text-muted d-flex align-items-center gap-2 mb-4">
                                            <small class="text-decoration-line-through">$899.00</small>
                                            <span class="fw-bold text-danger">$764.15</span>
                                            <small>(22%)</small>
                                        </h3>

                                        <h5 class="text-uppercase text-muted fs-xs mb-2">Product Info:</h5>

                                        <p>Relax in style with the Azure Comfort Single Sofa. Crafted with premium
                                            materials and a rich blue fabric, this single-seater is designed for both
                                            luxury and durability. Its sleek, modern profile fits perfectly in living
                                            rooms, reading nooks, or stylish lounges.</p>
                                        <p>Experience superior comfort with its deep cushioning and supportive backrest.
                                            The finely tailored upholstery and sturdy wood frame ensure long-lasting
                                            beauty and relaxation for years to come.</p>

                                        <h6 class="mt-3 fs-base">Details :</h6>
                                        <ul class="d-flex flex-column gap-1 mb-3">
                                            <li>
                                                Solid Mahogany frame from certified sustainable sources.
                                            </li>
                                            <li>
                                                Upholstered in premium blue fabric.
                                            </li>
                                            <li>
                                                Available with matte or polished wood finishes.
                                            </li>
                                            <li>
                                                High-density foam seat and back for exceptional comfort.
                                            </li>
                                        </ul>

                                        <a href="#!" class="link-primary fw-semibold">Read More...</a>


                                        <div data-table data-table-rows-per-page="5"
                                             class="card mt-5 border-dashed border-light">
                                            <div class="card-header border-light">
                                                <h4 class="card-title">Manage Reviews</h4>
                                            </div>

                                            <div class="card-header p-0 d-block">
                                                <div class="row align-items-center g-0">
                                                    <div class="col-xl-7">
                                                        <div class="d-flex align-items-center gap-4 p-4">
                                                            <img src="assets/images/ratings.svg" alt="Product"
                                                                 height="80">
                                                            <div>
                                                                <h3 class="text-primary d-flex align-items-center gap-2 mb-2 fw-bold">
                                                                    4.92 <i class="ti ti-star-filled"></i>
                                                                </h3>
                                                                <p class="mb-2">Based on 245 verified reviews</p>
                                                                <p class="pe-2 h6 text-muted mb-2 lh-base">Feedback
                                                                    collected from real customers who purchased our
                                                                    templates</p>
                                                                <span class="badge badge-label text-bg-success">+12 new this week</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-5">
                                                        <div class="p-3">
                                                            <!-- 5 Star -->
                                                            <div class="d-flex align-items-center gap-2 mb-2">
                                                                <div class="flex-shrink-0" style="width: 50px;">5 Star
                                                                </div>
                                                                <div class="progress w-100 bg-label-primary"
                                                                     style="height:8px;">
                                                                    <div class="progress-bar bg-primary"
                                                                         role="progressbar" style="width: 85%;"
                                                                         aria-valuenow="85" aria-valuemin="0"
                                                                         aria-valuemax="100"></div>
                                                                </div>
                                                                <div class="flex-shrink-0 text-end"
                                                                     style="width: 30px;"><span
                                                                        class="badge text-bg-light">128</span></div>
                                                            </div>

                                                            <!-- 4 Star -->
                                                            <div class="d-flex align-items-center gap-2 mb-2">
                                                                <div class="flex-shrink-0" style="width: 50px;">4 Star
                                                                </div>
                                                                <div class="progress w-100 bg-label-primary"
                                                                     style="height:8px;">
                                                                    <div class="progress-bar bg-primary"
                                                                         role="progressbar" style="width: 10%;"
                                                                         aria-valuenow="10" aria-valuemin="0"
                                                                         aria-valuemax="100"></div>
                                                                </div>
                                                                <div class="flex-shrink-0 text-end"
                                                                     style="width: 30px;"><span
                                                                        class="badge text-bg-light">37</span></div>
                                                            </div>

                                                            <!-- 3 Star -->
                                                            <div class="d-flex align-items-center gap-2 mb-2">
                                                                <div class="flex-shrink-0" style="width: 50px;">3 Star
                                                                </div>
                                                                <div class="progress w-100 bg-label-primary"
                                                                     style="height:8px;">
                                                                    <div class="progress-bar bg-primary"
                                                                         role="progressbar" style="width: 3%;"
                                                                         aria-valuenow="3" aria-valuemin="0"
                                                                         aria-valuemax="100"></div>
                                                                </div>
                                                                <div class="flex-shrink-0 text-end"
                                                                     style="width: 30px;"><span
                                                                        class="badge text-bg-light">15</span></div>
                                                            </div>

                                                            <!-- 2 Star -->
                                                            <div class="d-flex align-items-center gap-2 mb-2">
                                                                <div class="flex-shrink-0" style="width: 50px;">2 Star
                                                                </div>
                                                                <div class="progress w-100 bg-label-primary"
                                                                     style="height:8px;">
                                                                    <div class="progress-bar bg-primary"
                                                                         role="progressbar" style="width: 1%;"
                                                                         aria-valuenow="1" aria-valuemin="0"
                                                                         aria-valuemax="100"></div>
                                                                </div>
                                                                <div class="flex-shrink-0 text-end"
                                                                     style="width: 30px;"><span
                                                                        class="badge text-bg-light">7</span></div>
                                                            </div>

                                                            <!-- 1 Star -->
                                                            <div class="d-flex align-items-center gap-2">
                                                                <div class="flex-shrink-0" style="width: 50px;">1 Star
                                                                </div>
                                                                <div class="progress w-100 bg-label-primary"
                                                                     style="height:8px;">
                                                                    <div class="progress-bar bg-primary"
                                                                         role="progressbar" style="width: 1%;"
                                                                         aria-valuenow="1" aria-valuemin="0"
                                                                         aria-valuemax="100"></div>
                                                                </div>
                                                                <div class="flex-shrink-0 text-end"
                                                                     style="width: 30px;"><span
                                                                        class="badge text-bg-light">2</span></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="table-responsive">
                                                <table class="table table-custom table-centered table-select table-hover w-100 mb-0">
                                                    <thead class="bg-light align-middle bg-opacity-25">
                                                    <tr class="text-uppercase fs-xxs">
                                                        <th>Reviewer</th>
                                                        <th style="width: 18rem;">Review</th>
                                                        <th data-table-sort>Date</th>
                                                        <th data-table-sort>Status</th>
                                                        <th class="text-center" style="width: 1%;">Actions</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex justify-content-start align-items-center gap-2">
                                                                <div class="avatar avatar-sm">
                                                                    <img src="assets/images/users/user-8.jpg"
                                                                         alt="avatar-8"
                                                                         class="img-fluid rounded-circle">
                                                                </div>
                                                                <div>
                                                                    <h5 class="text-nowrap fs-sm mb-0 lh-base">Sophia
                                                                        Lee</h5>
                                                                    <p class="text-muted fs-xs mb-0">
                                                                        sophia.lee@digitalshop.com</p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                                    <span class="text-warning fs-lg">
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-filled"></span>
                                                                    </span>
                                                            <h5 class="mt-2">Great product, would buy again!</h5>
                                                            <p class="text-muted fst-italic mb-0">"These earbuds are
                                                                amazing, the sound quality is top-notch. Totally worth
                                                                the price!"</p>
                                                        </td>
                                                        <td>22 Apr, 2025 <small class="text-muted">04:10 PM</small></td>
                                                        <td><span
                                                                class="badge badge-soft-success fs-xxs">Published</span>
                                                        </td>
                                                        <td>
                                                            <div class="d-flex justify-content-center gap-1">
                                                                <a href="#"
                                                                   class="btn btn-light btn-icon btn-sm rounded-circle"><i
                                                                        class="ti ti-eye fs-lg"></i></a>
                                                                <a href="#"
                                                                   class="btn btn-light btn-icon btn-sm rounded-circle"><i
                                                                        class="ti ti-edit fs-lg"></i></a>
                                                                <a href="#"
                                                                   class="btn btn-light btn-icon btn-sm rounded-circle"><i
                                                                        class="ti ti-trash fs-lg"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td>
                                                            <div class="d-flex justify-content-start align-items-center gap-2">
                                                                <div class="avatar avatar-sm">
                                                                    <img src="assets/images/users/user-6.jpg"
                                                                         alt="avatar-6"
                                                                         class="img-fluid rounded-circle">
                                                                </div>
                                                                <div>
                                                                    <h5 class="text-nowrap fs-sm mb-0 lh-base">David
                                                                        Smith</h5>
                                                                    <p class="text-muted fs-xs mb-0">
                                                                        david.smith@healthstore.com</p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                                    <span class="text-warning fs-lg">
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-half-filled"></span>
                                                                    </span>
                                                            <h5 class="mt-2">Decent, but overpriced</h5>
                                                            <p class="text-muted fst-italic mb-0">"It does the job, but
                                                                I feel like it's a little expensive for what it
                                                                offers."</p>
                                                        </td>
                                                        <td>23 Apr, 2025 <small class="text-muted">02:20 PM</small></td>
                                                        <td><span class="badge badge-soft-warning fs-xxs">Pending</span>
                                                        </td>
                                                        <td>
                                                            <div class="d-flex justify-content-center gap-1">
                                                                <a href="#"
                                                                   class="btn btn-light btn-icon btn-sm rounded-circle"><i
                                                                        class="ti ti-eye fs-lg"></i></a>
                                                                <a href="#"
                                                                   class="btn btn-light btn-icon btn-sm rounded-circle"><i
                                                                        class="ti ti-edit fs-lg"></i></a>
                                                                <a href="#"
                                                                   class="btn btn-light btn-icon btn-sm rounded-circle"><i
                                                                        class="ti ti-trash fs-lg"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td>
                                                            <div class="d-flex justify-content-start align-items-center gap-2">
                                                                <div class="avatar avatar-sm">
                                                                    <img src="assets/images/users/user-3.jpg"
                                                                         alt="avatar-3"
                                                                         class="img-fluid rounded-circle">
                                                                </div>
                                                                <div>
                                                                    <h5 class="text-nowrap fs-sm mb-0 lh-base">Alice
                                                                        Johnson</h5>
                                                                    <p class="text-muted fs-xs mb-0">
                                                                        alice.johnson@homesupplies.com</p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                                    <span class="text-warning fs-lg">
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-filled"></span>
                                                                    </span>
                                                            <h5 class="mt-2">Amazing quality!</h5>
                                                            <p class="text-muted fst-italic mb-0">"The TV has incredible
                                                                picture quality. Totally worth the investment!"</p>
                                                        </td>
                                                        <td>24 Apr, 2025 <small class="text-muted">09:15 AM</small></td>
                                                        <td><span
                                                                class="badge badge-soft-success fs-xxs">Published</span>
                                                        </td>
                                                        <td>
                                                            <div class="d-flex justify-content-center gap-1">
                                                                <a href="#"
                                                                   class="btn btn-light btn-icon btn-sm rounded-circle"><i
                                                                        class="ti ti-eye fs-lg"></i></a>
                                                                <a href="#"
                                                                   class="btn btn-light btn-icon btn-sm rounded-circle"><i
                                                                        class="ti ti-edit fs-lg"></i></a>
                                                                <a href="#"
                                                                   class="btn btn-light btn-icon btn-sm rounded-circle"><i
                                                                        class="ti ti-trash fs-lg"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td>
                                                            <div class="d-flex justify-content-start align-items-center gap-2">
                                                                <div class="avatar avatar-sm">
                                                                    <img src="assets/images/users/user-2.jpg"
                                                                         alt="avatar-2"
                                                                         class="img-fluid rounded-circle">
                                                                </div>
                                                                <div>
                                                                    <h5 class="text-nowrap fs-sm mb-0 lh-base">Michael
                                                                        Green</h5>
                                                                    <p class="text-muted fs-xs mb-0">
                                                                        michael.green@mobileshop.com</p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                                    <span class="text-warning fs-lg">
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-filled"></span>
                                                                    </span>
                                                            <h5 class="mt-2">Perfect phone, highly recommended!</h5>
                                                            <p class="text-muted fst-italic mb-0">"The camera is amazing
                                                                and the performance is smooth. Definitely the best
                                                                smartphone I have used!"</p>
                                                        </td>
                                                        <td>25 Apr, 2025 <small class="text-muted">11:30 AM</small></td>
                                                        <td><span
                                                                class="badge badge-soft-success fs-xxs">Published</span>
                                                        </td>
                                                        <td>
                                                            <div class="d-flex justify-content-center gap-1">
                                                                <a href="#"
                                                                   class="btn btn-light btn-icon btn-sm rounded-circle"><i
                                                                        class="ti ti-eye fs-lg"></i></a>
                                                                <a href="#"
                                                                   class="btn btn-light btn-icon btn-sm rounded-circle"><i
                                                                        class="ti ti-edit fs-lg"></i></a>
                                                                <a href="#"
                                                                   class="btn btn-light btn-icon btn-sm rounded-circle"><i
                                                                        class="ti ti-trash fs-lg"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td>
                                                            <div class="d-flex justify-content-start align-items-center gap-2">
                                                                <div class="avatar avatar-sm">
                                                                    <img src="assets/images/users/user-4.jpg"
                                                                         alt="avatar-4"
                                                                         class="img-fluid rounded-circle">
                                                                </div>
                                                                <div>
                                                                    <h5 class="text-nowrap fs-sm mb-0 lh-base">Chris
                                                                        Evans</h5>
                                                                    <p class="text-muted fs-xs mb-0">
                                                                        chris.evans@gamestore.com</p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                                    <span class="text-warning fs-lg">
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-filled"></span>
                                                                        <span class="ti ti-star-half-filled"></span>
                                                                    </span>
                                                            <h5 class="mt-2">Great for gaming but heavy</h5>
                                                            <p class="text-muted fst-italic mb-0">"The performance is
                                                                amazing, but it's a bit too heavy to carry around all
                                                                day."</p>
                                                        </td>
                                                        <td>26 Apr, 2025 <small class="text-muted">10:00 AM</small></td>
                                                        <td><span class="badge badge-soft-warning fs-xxs">Pending</span>
                                                        </td>
                                                        <td>
                                                            <div class="d-flex justify-content-center gap-1">
                                                                <a href="#"
                                                                   class="btn btn-light btn-icon btn-sm rounded-circle"><i
                                                                        class="ti ti-eye fs-lg"></i></a>
                                                                <a href="#"
                                                                   class="btn btn-light btn-icon btn-sm rounded-circle"><i
                                                                        class="ti ti-edit fs-lg"></i></a>
                                                                <a href="#"
                                                                   class="btn btn-light btn-icon btn-sm rounded-circle"><i
                                                                        class="ti ti-trash fs-lg"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>

                                                    </tbody>
                                                </table>

                                            </div>
                                            <div class="card-footer border-0">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div data-table-pagination-info="reviews"></div>
                                                    <div data-table-pagination></div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div> <!-- end col-->
                            </div> <!-- end row-->
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div> <!-- end col-->
            </div> <!-- end row-->

        </div>
        <!-- container -->

        <!-- Footer Start -->
        <footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 text-center text-md-start">
                        © 2014 - <script>document.write(new Date().getFullYear())</script> Inspinia By <span class="fw-semibold">WebAppLayers</span> 
                    </div>
                    <div class="col-md-6">
                        <div class="text-md-end d-none d-md-block">
                            10GB of <span class="fw-bold">250GB</span> Free.
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- end Footer -->

    </div>

    <!-- ============================================================== -->
    <!-- End of Main Content -->
    <!-- ============================================================== -->

</div>
<!-- END wrapper -->

<!-- Theme Settings -->
<div class="offcanvas offcanvas-end overflow-hidden" tabindex="-1" id="theme-settings-offcanvas">
    <div class="d-flex justify-content-between text-bg-primary gap-2 p-3" style="background-image: url(assets/images/user-bg-pattern.png);">
        <div>
            <h5 class="mb-1 fw-bold text-white text-uppercase">Admin Customizer</h5>
            <p class="text-white text-opacity-75 fst-italic fw-medium mb-0">Easily configure layout, styles, and preferences for your admin interface.</p>
        </div>

        <div class="flex-grow-0">
            <button type="button" class="d-block btn btn-sm bg-white bg-opacity-25 text-white rounded-circle btn-icon" data-bs-dismiss="offcanvas"><i class="ti ti-x fs-lg"></i></button>
        </div>
    </div>

    <div class="offcanvas-body p-0 h-100" data-simplebar>
        <div class="p-3 border-bottom border-dashed">
            <h5 class="mb-3 fw-bold">Select Theme</h5>
            <div class="row g-3">
                <div class="col-6">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-classic" value="classic">
                        <label class="form-check-label p-0 w-100" for="demo-skin-classic">
                            <img src="assets/images/layouts/themes/theme-classic.png" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Classic</h5>
                </div>

                <div class="col-6">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-material" value="material">
                        <label class="form-check-label p-0 w-100" for="demo-skin-material">
                            <img src="assets/images/layouts/themes/theme-material.png" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Material</h5>
                </div>

                <div class="col-6">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-modern" value="modern">
                        <label class="form-check-label p-0 w-100" for="demo-skin-modern">
                            <img src="assets/images/layouts/themes/theme-modern.png" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Modern</h5>
                </div>

                <div class="col-6">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-saas" value="saas">
                        <label class="form-check-label p-0 w-100" for="demo-skin-saas">
                            <img src="assets/images/layouts/themes/theme-saas.png" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">SaaS</h5>
                </div>

                <div class="col-6">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-flat" value="flat">
                        <label class="form-check-label p-0 w-100" for="demo-skin-flat">
                            <img src="assets/images/layouts/themes/theme-flat.png" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Flat</h5>
                </div>

                <div class="col-6">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-minimal" value="minimal">
                        <label class="form-check-label p-0 w-100" for="demo-skin-minimal">
                            <img src="assets/images/layouts/themes/theme-minimal.png" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Minimal</h5>
                </div>

                <div class="col-6">
                    <div class="form-check card-radio pe-none">
                        <input class="form-check-input" disabled type="radio" name="data-skin" id="demo-skin-galaxy" value="galaxy">
                        <label class="form-check-label p-0 w-100" for="demo-skin-galaxy">
                            <img src="assets/images/layouts/themes/theme-galaxy.png" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Galaxy</h5>
                </div>
            </div>
        </div>

        <div class="p-3 border-bottom border-dashed">
            <h5 class="mb-3 fw-bold">Color Scheme</h5>
            <div class="row">
                <div class="col-4">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-bs-theme" id="layout-color-light" value="light">
                        <label class="form-check-label p-0 w-100" for="layout-color-light">
                            <img src="assets/images/layouts/light.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Light</h5>
                </div>

                <div class="col-4">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-bs-theme" id="layout-color-dark" value="dark">
                        <label class="form-check-label p-0 w-100" for="layout-color-dark">
                            <img src="assets/images/layouts/dark.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Dark</h5>
                </div>

                <div class="col-4">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-bs-theme" id="layout-color-system" value="system">
                        <label class="form-check-label p-0 w-100" for="layout-color-system">
                            <img src="assets/images/layouts/system.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">System</h5>
                </div>
            </div>
        </div>

        <div class="p-3 border-bottom border-dashed">
            <h5 class="mb-3 fw-bold">Topbar Color</h5>

            <div class="row g-3">
                <div class="col-4">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-topbar-color" id="topbar-color-light" value="light">
                        <label class="form-check-label p-0 w-100" for="topbar-color-light">
                            <img src="assets/images/layouts/topbar-light.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Light</h5>
                </div>

                <div class="col-4">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-topbar-color" id="topbar-color-dark" value="dark">
                        <label class="form-check-label p-0 w-100" for="topbar-color-dark">
                            <img src="assets/images/layouts/topbar-dark.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Dark</h5>
                </div>

                <div class="col-4">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-topbar-color" id="topbar-color-gray" value="gray">
                        <label class="form-check-label p-0 w-100" for="topbar-color-gray">
                            <img src="assets/images/layouts/topbar-gray.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Gray</h5>
                </div>

                <div class="col-4">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-topbar-color" id="topbar-color-gradient" value="gradient">
                        <label class="form-check-label p-0 w-100" for="topbar-color-gradient">
                            <img src="assets/images/layouts/topbar-gradient.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Gradient</h5>
                </div>
            </div>
        </div>

        <div class="p-3 border-bottom border-dashed">
            <h5 class="mb-3 fw-bold">Sidenav Color</h5>

            <div class="row g-3">
                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-menu-color" id="sidenav-color-light" value="light">
                        <label class="form-check-label p-0 w-100" for="sidenav-color-light">
                            <img src="assets/images/layouts/light.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Light</h5>
                </div>

                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-menu-color" id="sidenav-color-dark" value="dark">
                        <label class="form-check-label p-0 w-100" for="sidenav-color-dark">
                            <img src="assets/images/layouts/side-dark.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Dark</h5>
                </div>

                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-menu-color" id="sidenav-color-gray" value="gray">
                        <label class="form-check-label p-0 w-100" for="sidenav-color-gray">
                            <img src="assets/images/layouts/side-gray.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Gray</h5>
                </div>

                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-menu-color" id="sidenav-color-gradient" value="gradient">
                        <label class="form-check-label p-0 w-100" for="sidenav-color-gradient">
                            <img src="assets/images/layouts/side-gradient.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Gradient</h5>
                </div>
                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-menu-color" id="sidenav-color-image" value="image">
                        <label class="form-check-label p-0 w-100" for="sidenav-color-image">
                            <img src="assets/images/layouts/side-image.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Image</h5>
                </div>
            </div>
        </div>

        <div class="p-3 border-bottom border-dashed">
            <h5 class="mb-3 fw-bold">Sidebar Size</h5>

            <div class="row g-3">
                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-sidenav-size" id="sidenav-size-default" value="default">
                        <label class="form-check-label p-0 w-100" for="sidenav-size-default">
                            <img src="assets/images/layouts/light.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">Default</h5>
                </div>

                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-sidenav-size" id="sidenav-size-compact" value="compact">
                        <label class="form-check-label p-0 w-100" for="sidenav-size-compact">
                            <img src="assets/images/layouts/sidebar-compact.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">Compact</h5>
                </div>

                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-sidenav-size" id="sidenav-size-small" value="condensed">
                        <label class="form-check-label p-0 w-100" for="sidenav-size-small">
                            <img src="assets/images/layouts/sidebar-sm.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">Condensed</h5>
                </div>

                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-sidenav-size" id="sidenav-size-small-hover" value="on-hover">
                        <label class="form-check-label p-0 w-100" for="sidenav-size-small-hover">
                            <img src="assets/images/layouts/sidebar-sm.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">On Hover</h5>
                </div>

                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-sidenav-size" id="sidenav-size-small-hover-active" value="on-hover-active">
                        <label class="form-check-label p-0 w-100" for="sidenav-size-small-hover-active">
                            <img src="assets/images/layouts/light.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="mb-0 fs-base text-center text-muted mt-2">On Hover - Show</h5>
                </div>

                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-sidenav-size" id="sidenav-size-offcanvas" value="offcanvas">
                        <label class="form-check-label p-0 w-100" for="sidenav-size-offcanvas">
                            <img src="assets/images/layouts/sidebar-full.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">Offcanvas</h5>
                </div>
            </div>
        </div>

        <div class="p-3 border-bottom border-dashed">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="fw-bold mb-0">Layout Position</h5>

                <div class="btn-group radio" role="group">
                    <input type="radio" class="btn-check" name="data-layout-position" id="layout-position-fixed" value="fixed">
                    <label class="btn btn-sm btn-soft-warning w-sm" for="layout-position-fixed">Fixed</label>

                    <input type="radio" class="btn-check" name="data-layout-position" id="layout-position-scrollable" value="scrollable">
                    <label class="btn btn-sm btn-soft-warning w-sm ms-0" for="layout-position-scrollable">Scrollable</label>
                </div>
            </div>
        </div>

        <div class="p-3">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><label class="fw-bold m-0" for="sidebaruser-check">Sidebar User Info</label></h5>
                
                <div class="form-check form-switch fs-lg">
                    <input type="checkbox" class="form-check-input" name="sidebar-user" id="sidebaruser-check">
                </div>
            </div>
        </div>
    </div>

    <div class="offcanvas-footer border-top p-3 text-center">
        <div class="row">
            <div class="col-6">
                <button type="button" class="btn btn-light fw-semibold py-2 w-100" id="reset-layout">Reset</button>
            </div>
            <div class="col-6">
                <a href="https://wrapbootstrap.com/theme/inspinia-multipurpose-admin-dashboard-template-WB0R5L90S?ref=inspinia" target="_blank" class="btn btn-danger bg-gradient py-2 fw-semibold w-100">Buy Now</a>
            </div>
        </div>
    </div>
</div>

<!-- Vendor js -->
<script src="assets/js/vendors.min.js"></script>

<!-- App js -->
<script src="assets/js/app.js"></script>

</body>

</html>